<template>
  <Head title="产品分类" />
  <ShopLayout>
    <div class="bg-gray-100 min-h-screen">
      <div class="max-w-7xl mx-auto px-8 sm:px-16 lg:px-24 py-12">
        <!-- 页面标题 -->
        <div class="text-center mb-16">
          <h1 class="text-4xl font-light text-gray-900 mb-4">产品分类</h1>
          <p class="text-lg text-gray-600">浏览所有 Orange Tech 产品分类</p>
        </div>

        <!-- 分类过滤器 -->
        <div class="mb-12 bg-white rounded-2xl p-6 shadow-sm border border-gray-200">
          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <!-- 左侧：分类筛选 -->
            <div class="flex flex-wrap gap-3">
              <button 
                v-for="category in categories" 
                :key="category.id"
                @click="toggleCategoryFilter(category.id)"
                :class="[
                  'px-4 py-2 rounded-full text-sm font-medium transition-all duration-200',
                  selectedCategories.includes(category.id) 
                    ? 'bg-blue-100 text-blue-700 border border-blue-200' 
                    : 'bg-gray-100 text-gray-700 border border-gray-200 hover:bg-gray-200'
                ]"
              >
                {{ category.icon }} {{ category.name }}
              </button>
            </div>

            <!-- 右侧：排序和视图 -->
            <div class="flex items-center gap-4">
              <!-- 排序选择 -->
              <div class="relative">
                <select 
                  v-model="sortBy" 
                  class="appearance-none bg-white border border-gray-300 rounded-lg px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="name">按名称排序</option>
                  <option value="price">按价格排序</option>
                  <option value="variants">按规格数量排序</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                  <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                  </svg>
                </div>
              </div>

              <!-- 视图切换 -->
              <div class="flex border border-gray-300 rounded-lg overflow-hidden">
                <button 
                  @click="viewMode = 'grid'"
                  :class="[
                    'p-2 transition-colors duration-200',
                    viewMode === 'grid' ? 'bg-blue-100 text-blue-700' : 'bg-white text-gray-600 hover:bg-gray-50'
                  ]"
                >
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                  </svg>
                </button>
                <button 
                  @click="viewMode = 'list'"
                  :class="[
                    'p-2 transition-colors duration-200',
                    viewMode === 'list' ? 'bg-blue-100 text-blue-700' : 'bg-white text-gray-600 hover:bg-gray-50'
                  ]"
                >
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <!-- 活跃过滤器显示 -->
          <div v-if="selectedCategories.length > 0" class="mt-4 pt-4 border-t border-gray-200">
            <div class="flex items-center gap-2 flex-wrap">
              <span class="text-sm text-gray-600">已选择:</span>
              <span 
                v-for="categoryId in selectedCategories" 
                :key="categoryId"
                class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm"
              >
                {{ getCategoryName(categoryId) }}
                <button 
                  @click="removeCategoryFilter(categoryId)"
                  class="ml-1 hover:bg-blue-200 rounded-full p-0.5"
                >
                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg>
                </button>
              </span>
              <button 
                @click="clearAllFilters"
                class="text-sm text-gray-500 hover:text-gray-700 underline"
              >
                清除所有
              </button>
            </div>
          </div>
        </div>

        <!-- 分类列表 -->
        <div class="space-y-20">
          <div v-for="category in sortedCategories" :key="category.id" class="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
            <!-- 主分类标题 -->
            <div class="flex items-center gap-4 mb-10">
              <div class="text-5xl">{{ category.icon }}</div>
              <div class="flex-1">
                <h2 class="text-3xl font-light text-gray-900 mb-2">{{ category.name }}</h2>
                <p class="text-lg text-gray-600">{{ category.description }}</p>
              </div>
              <div class="text-right">
                <div class="text-2xl font-light text-gray-400">{{ category.products ? category.products.length : 0 }}</div>
                <div class="text-sm text-gray-500">产品</div>
              </div>
            </div>

            <!-- 产品列表 -->
            <div v-if="category.products && category.products.length > 0" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
              <div v-for="product in category.products" :key="product.id" class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6 border border-gray-200 hover:shadow-lg transition-all duration-300">
                <!-- 产品基本信息 -->
                <div class="flex items-start justify-between mb-6">
                  <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                      <h4 class="text-xl font-medium text-gray-900">{{ product.name }}</h4>
                      <span v-if="product.is_featured" class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">推荐</span>
                      <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">{{ product.variants.length }} 规格</span>
                    </div>
                    <p class="text-gray-600 mb-3">{{ product.short_description }}</p>
                    <div class="flex items-center gap-4">
                      <div class="text-2xl font-medium text-gray-900">¥{{ product.price.toLocaleString() }}</div>
                      <span v-if="product.compare_price" class="text-lg text-gray-500 line-through">¥{{ product.compare_price.toLocaleString() }}</span>
                      <div class="text-sm text-gray-500">
                        价格范围: ¥{{ getMinPrice(product.variants).toLocaleString() }} - ¥{{ getMaxPrice(product.variants).toLocaleString() }}
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 横向展示所有规格型号 -->
                <div v-if="product.variants && product.variants.length > 0" class="space-y-4">
                  <div class="flex items-center justify-between">
                    <h5 class="text-lg font-medium text-gray-900">所有规格</h5>
                    <div class="text-sm text-gray-500">共 {{ product.variants.length }} 个规格</div>
                  </div>
                  
                  <!-- 横向展示规格型号名称 -->
                  <div class="flex flex-wrap gap-2">
                    <span 
                      v-for="variant in product.variants" 
                      :key="variant.id"
                      class="inline-flex items-center px-3 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors duration-200"
                    >
                      {{ variant.name }}
                    </span>
                  </div>
                </div>

                <!-- 无规格型号提示 -->
                <div v-else class="text-center py-6 text-gray-500 bg-gray-50 rounded-xl">
                  <div class="text-2xl mb-2">📦</div>
                  <p>暂无规格信息</p>
                </div>
              </div>
            </div>

            <!-- 无产品提示 -->
            <div v-else class="text-center py-12 text-gray-500 bg-gray-50 rounded-2xl">
              <div class="text-4xl mb-4">📦</div>
              <p class="text-lg">暂无产品</p>
            </div>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="mt-20 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-3xl p-8 shadow-sm border border-blue-200">
          <div class="text-center mb-8">
            <h3 class="text-2xl font-light text-gray-900 mb-2">数据统计</h3>
            <p class="text-gray-600">完整的 Orange Tech 产品分类体系</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="text-center bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow duration-200">
              <div class="text-4xl font-light text-blue-600 mb-3">{{ categories.length }}</div>
              <div class="text-gray-700 font-medium mb-1">产品分类</div>
              <div class="text-sm text-gray-500">涵盖所有 Orange Tech 产品线</div>
            </div>
            <div class="text-center bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow duration-200">
              <div class="text-4xl font-light text-purple-600 mb-3">{{ totalProducts }}</div>
              <div class="text-gray-700 font-medium mb-1">产品</div>
              <div class="text-sm text-gray-500">在售商品</div>
            </div>
          </div>
          
          <!-- 额外统计信息 -->
          <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl p-6 shadow-sm">
              <div class="flex items-center gap-3 mb-3">
                <div class="text-2xl">📱</div>
                <div class="text-lg font-medium text-gray-900">产品覆盖</div>
              </div>
              <div class="text-sm text-gray-600">
                涵盖 Orange Phone、Orange Book、Orange Pad、Orange Watch、Orange Pods 等全系列 Orange Tech 产品
              </div>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-sm">
              <div class="flex items-center gap-3 mb-3">
                <div class="text-2xl">⚙️</div>
                <div class="text-lg font-medium text-gray-900">规格丰富</div>
              </div>
              <div class="text-sm text-gray-600">
                每个产品提供多种颜色、存储容量、连接方式等规格选择
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { computed, ref } from 'vue'
import { Head, Link } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'
import { useCategoryFiltering } from '@/composables/useCategoryFiltering'

// Props
const props = defineProps({
  categories: {
    type: Array,
    required: true
  }
})

// 使用分类过滤 composable
const {
  selectedCategories,
  sortBy,
  viewMode,
  totalProducts,
  filteredCategories,
  sortedCategories,
  toggleCategoryFilter,
  removeCategoryFilter,
  clearAllFilters,
  getCategoryName,
  getCategoryMinPrice,
  getCategoryTotalVariants
} = useCategoryFiltering(props.categories)

// 方法
const getAttributeLabel = (key) => {
  const labels = {
    'color': '颜色',
    'storage': '存储',
    'chip': '芯片',
    'memory': '内存',
    'connectivity': '连接方式',
    'case_size': '表壳尺寸',
    'case_material': '表壳材质',
    'case_color': '表壳颜色',
    'charging_case': '充电盒'
  }
  return labels[key] || key
}

const getMinPrice = (variants) => {
  if (!variants || variants.length === 0) return 0
  return Math.min(...variants.map(v => parseFloat(v.price)))
}

const getMaxPrice = (variants) => {
  if (!variants || variants.length === 0) return 0
  return Math.max(...variants.map(v => parseFloat(v.price)))
}

// 这些方法现在由 composable 提供
</script>
